<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <el-form :inline="true" class="form-inline">
        <el-form-item label="部门">
          <el-select
            v-model="dep.id"
            clearable
            @change="selectedChange($event)"
          >
            <el-option
              v-for="a in dep"
              :key="a.id"
              :label="a.name"
              :value="a.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="select">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" />
      <span>数据列表</span>

      <el-form :inline="true">
        <el-form-item label="当前部门: ">
          <el-input v-model="depart" readonly="readonly" />
        </el-form-item>
        <el-form-item label="部门领导:">
          <el-input v-model="leader" readonly="readonly" />
        </el-form-item>

        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="dialogFormOneVisible = true"
          >添加新员工</el-button>
        </el-form-item>
        <!-- 点击添加后，弹出选择框 -->
        <el-dialog title="添加新员工" :visible.sync="dialogFormOneVisible">
          <el-form>
            <!-- 将员工信息填入，然后提交 -->
            <el-form-item label="编号" :label-width="formLabelWidth">
              <el-input v-model="newEmployee.id" />
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="newEmployee.name" />
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-input v-model="newEmployee.gender" />
            </el-form-item>
            <el-form-item label="身份证" :label-width="formLabelWidth">
              <el-input v-model="newEmployee.identity" />
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
              <el-input v-model="newEmployee.telephone" />
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
              <el-input v-model="newEmployee.email" />
            </el-form-item>

            <!-- 获取所选的部门id，用于确认下面的岗位 -->
            <el-form-item label="部门" :label-width="formLabelWidth">
              <el-select
                v-model="dep.id"
                clearable
                @change="departmentChange($event)"
              >
                <el-option
                  v-for="a in dep"
                  :key="a.id"
                  :label="a.name"
                  :value="a.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="岗位" :label-width="formLabelWidth">
              <el-select
                v-model="newEmpPost.id"
                placeholder="请选择该员工任职的岗位"
                @change="postChange($event)"
              >
                <el-option
                  v-for="ep in newEmpPost"
                  :key="ep.id"
                  :label="ep.name"
                  :value="ep.id"
                />
              </el-select>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormOneVisible = false">取 消</el-button>
            <!-- 点击确定后，调用后台 -->
            <el-button type="primary" @click="addNewEmployee">确 定</el-button>
          </div>
        </el-dialog>

        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="dialogFormVisible = true"
          >创建新部门</el-button>
        </el-form-item>
        <!-- 输入新部门的信息 -->
        <el-dialog title="添加新部门" :visible.sync="dialogFormVisible">
          <el-form>
            <el-form-item label="部门名字" :label-width="formLabelWidth">
              <el-input v-model="department.name" autocomplete="off" />
            </el-form-item>

            <el-form-item label="部门领导" :label-width="formLabelWidth">
              <el-select
                v-model="newDepartmentLeader.id"
                placeholder="请指定部门领导"
                @change="newLeaderSelectedChange($event)"
              >
                <el-option
                  v-for="nd in newDepartmentLeader"
                  :key="nd.id"
                  :label="nd.name"
                  :value="nd.id"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="createNewDepartment"
            >确 定</el-button>
          </div>
        </el-dialog>

        <el-form-item>
          <el-button
            size="small"
            type="danger"
            @click="open"
          >删除当前部门</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="员工编号" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>员工编号: {{ scope.row.id }}</p>
              <p>姓名: {{ scope.row.name }}</p>
              <p>身份证: {{ scope.row.identity }}</p>
              <p>性别: {{ scope.row.gender }}</p>
              <p>电话号码: {{ scope.row.telephone }}</p>
              <p>邮箱: {{ scope.row.email }}</p>
              <p>入职时间: {{ scope.row.join_time }}</p>

              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="岗位" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.pos.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              @click="
                exchangeDepartment(scope.$index, scope.row),
                (dialogFormTwoVisible = true)
              "
            >调换部门</el-button>

            <!-- 调换部门内嵌弹窗 -->
            <el-dialog title="调换部门" :visible.sync="dialogFormTwoVisible">
              <el-form>
                <el-form-item label="当前部门" :label-width="formLabelWidth">
                  <el-input
                    v-model="depart"
                    readonly="readonly"
                    autocomplete="off"
                  />
                </el-form-item>

                <el-form-item
                  label="调换到的部门"
                  :label-width="formLabelWidth"
                >
                  <el-select
                    v-model="dep.id"
                    @change="exchangeSelectedChange($event)"
                  >
                    <el-option
                      v-for="d in dep"
                      :key="d.id"
                      :label="d.name"
                      :value="d.id"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="该部门担任岗位"
                  :label-width="formLabelWidth"
                >
                  <el-select
                    v-model="exchangePost.id"
                    placeholder="请选择该员工任职的岗位"
                    @change="exchangePostSelectedChange($event)"
                  >
                    <el-option
                      v-for="ep in exchangePost"
                      :key="ep.id"
                      :label="ep.name"
                      :value="ep.id"
                    />
                  </el-select>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button
                  @click="dialogFormTwoVisible = false"
                >取 消</el-button>
                <el-button type="primary" @click="exchange">确 定</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- //currentPage: 设置最开始显示页码  :current-page="currentPage1" -->
    <div class="block">
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      />
    </div>
  </div>
</template>

<script>
import { getAllDepartments } from '@/api/department'
import { getEmpInSameDepart } from '@/api/department'
import { getNewEmp } from '@/api/department'
import { getNewEmpPost } from '@/api/department'
import { addNewEmp } from '@/api/department'
import { createDepartment } from '@/api/department'
import { getNotLeaderList } from '@/api/department'
import { deleteDepartment } from '@/api/department'
import { getAllEmployee } from '@/api/department'

export default {
  data() {
    return {
      // 查询所用部门
      dep: [],
      // 当前部门
      depart: '',
      // 当前部门leader
      leader: '',
      // 当前部门id
      departID: '',
      // 员工列表
      tableData: [],

      // 添加员工内嵌框配置
      dialogFormOneVisible: false,
      formLabelWidth: '120px',
      // 新增员工姓名
      newEmp: [],
      // 新增员工的岗位
      newEmpPost: [],

      // 将employee发送到后端
      employee: {
        // 选定后，新增员工
        id: '',
        // 选定后，员工的职位
        post: ''
      },

      // 新员工的信息
      newEmployee: {
        id: '',
        name: '',
        gender: '',
        identity: '',
        telephone: '',
        email: '',
        post: ''
      },

      // 添加部门内嵌框配置
      dialogFormVisible: false,
      // 指定能够担任部门领导的人
      newDepartmentLeader: [],
      department: {
        // 选定的新部门名字
        name: '',
        // 选定的部门领导id
        header: ''
      },

      // 调换部门配置
      dialogFormTwoVisible: false,
      // 选择时，可以担任的岗位
      exchangePost: [],
      // 调换到的部门信息
      exchangeDepart: '',

      // 传往后台: 修改的信息
      // 调换的员工信息
      exchangeEmployee: '',
      // 选择的岗位
      selectedExchangePost: ''
    }
  },
  created: function() {
    // 进页面，就显示所有员工
    getAllEmployee().then((res) => {
      this.tableData = res.data
      for (const t of this.tableData) {
        const d = new Date(t.join_time)
        t.join_time = d.toLocaleString()
      }
    })

    getAllDepartments().then((res) => {
      this.dep = res.data
      console.log(this.dep)
      console.log(res.data)
    })

    // 往后台获取新员工名字
    getNewEmp().then((res) => {
      console.log(res.data)
      for (const r of res.data) {
        if (r.post == null) {
          this.newEmp.push(r)
        }
      }
    })

    // 获取不是leader的员工list
    getNotLeaderList().then((res) => {
      this.newDepartmentLeader = res.data
    })
  },
  methods: {
    // 获取当前部门信息
    selectedChange(id) {
      console.log(id)

      for (const d of this.dep) {
        if (d.id === id) {
          this.depart = d.name
          this.leader = d.leader.name
        }
      }
      this.departID = id
    },

    // 添加新员工，获得选择部门的信息
    departmentChange(id) {
      this.departID = id
      // 获取当前部门所有可用职位
      getNewEmpPost(this.departID).then((res) => {
        this.newEmpPost = res.data
      })
    },

    // 添加新员工，获得选择岗位的信息
    postChange(id) {
      this.newEmployee.post = id
    },

    // 获取新添加员工的信息
    empSelectedChange(id) {
      for (const e of this.newEmp) {
        // 获取到选择的员工信息
        if (e.id === id) {
          this.employee.id = e.id
        }
      }
    },

    // 获取选定的部门领导id
    newLeaderSelectedChange(id) {
      for (const nd of this.newDepartmentLeader) {
        // 获取到选择的员工信息
        if (nd.id === id) {
          this.department.header = nd.id
        }
      }
      console.log(this.department)
    },

    // 获取选择的员工岗位
    empPostSelectedChange(id) {
      for (const ep of this.newEmpPost) {
        // 获取到选择的员工信息
        if (ep.id === id) {
          this.employee.post = ep.id
        }
      }
    },

    // 获取调换部门的信息
    exchangeSelectedChange(id) {
      for (const ed of this.dep) {
        if (ed.id === id) {
          this.exchangeDepart = ed
        }
      }
      // 获取调换部门可用职位
      getNewEmpPost(this.exchangeDepart.id).then((res) => {
        this.exchangePost = res.data
      })
    },

    // 获取选择了的 调换部门的岗位
    exchangePostSelectedChange(id) {
      console.log(id)
      console.log(this.exchangePost)

      for (const ep of this.exchangePost) {
        if (ep.id === id) {
          this.selectedExchangePost = ep
        }
      }
    },

    select() {
      getEmpInSameDepart(this.departID).then((res) => {
        this.tableData = res.data
      })

      // 获取当前部门所有可用职位
      getNewEmpPost(this.departID).then((res) => {
        this.newEmpPost = res.data
      })
    },

    // 添加员工功能
    addNewEmployee() {
      addNewEmp(this.newEmployee).then((res) => {
        this.dialogFormOneVisible = false
        // console.log(res.data)
        alert(res.data)
      })
    },

    // 创建新部门
    createNewDepartment() {
      createDepartment(this.department).then((res) => {
        this.dialogFormVisible = false
        alert(res.data)
      })
    },

    // 员工部门调换：获取要调换的员工信息
    exchangeDepartment(index, row) {
      console.log(index, row)
      this.exchangeEmployee = row
    },

    // 执行调换功能
    exchange() {
      // //调换的员工信息
      //   exchangeEmployee:'',
      // //选择的岗位
      // selectedExchangePost:''
      var emp = {
        id: this.exchangeEmployee.id,
        post: this.selectedExchangePost.id
      }
      addNewEmp(emp).then((res) => {
        this.dialogFormTwoVisible = false
        // console.log(res.data)
        alert(res.data)
      })
    },

    // 删除当前部门 ，内嵌提醒
    open() {
      this.$confirm('此操作将删除当前部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 执行删除操作
          deleteDepartment(this.departID).then(() => {})

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
